<template>
  <div style="width:100%">
    <dv-border-box-13
      :color="['#13148c', '#1b1fff']"
      backgroundColor="rgba(0,0,0,0.1)"
    >
      <div class="head_tit" style="margin-bottom:0px">完成率</div>
      <div id="chart" style="height: 32vh"></div>
    </dv-border-box-13>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'
export default {
  name: '',
  data() {
    return {
      chart: null,
    }
  },
  props: {
    hgl: {
      type: Number,
      default: 0,
    },
  },
  created() {},
  mounted() {},
  watch: {
    hgl() {
      this.line()
    },
  },
  methods: {
    line() {
      this.chart = document.getElementById('chart')
      const myChart = new Charts(this.chart)
      const option1 = {
        // title: {
        //   text: '合格率',
        //   offset: [-20, -20],
        //   style: {
        //     fill: '#fff',
        //     fontWeight: 'normal',
        //     fontSize: 18,
        //   },
        // },
        series: [
          {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            center: ['50%', '45%'], //设置图标的中心点（水平，垂直方向的距离）
            data: [
              {
                name: '合格率',
                value: this.hgl,
                gradient: ['#03c2fd', '#1ed3e5', '#2fded6'],
                // gradient: ['#03c2fd'],
              },
            ],

            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: 'round',
            },
            backgroundArc: {
              style: {
                fill: '#999',
                opacity: 0.2,
              },
            },
            details: {
              show: true,
              formatter: '{value}%',
              style: {
                fill: '#fff',
                // fill: '#1ed3e5',
                fontSize: 22,
                fontWeight: 'normal',
              },
            },
          },
        ],
      }
      myChart.setOption(option1)
      // //图表自适应
      // window.addEventListener('resize', function() {
      //   myChart.resize()
      // })
    },
    // resize() {
    //   window.addEventListener('resize', () => {
    //     this.chart.resize()
    //   })
    // },
  },
}
</script>

<style scoped>
.chart {
}
</style>
